/// <reference path="../../bootstrap/scss/bootstrap-reboot.scss" />

$bs-datetimepicker-timepicker-font-size: 1.2em !default;
$bs-datetimepicker-active-bg: $primary !default;
$bs-datetimepicker-active-color: #fff !default;
$bs-datetimepicker-border-radius: 0.375rem !default;
$bs-datetimepicker-btn-hover-bg: $gray-100 !default;
$bs-datetimepicker-disabled-color: $gray-500 !default;
$bs-datetimepicker-alternate-color: $gray-500 !default;
$bs-datetimepicker-secondary-border-color: #ccc !default;
$bs-datetimepicker-secondary-border-color-rgba: rgba(#000, 0.2) !default;
$bs-datetimepicker-primary-border-color: #fff !default;
$bs-datetimepicker-text-shadow: none !default;

.sr-only {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0,0,0,0);
	border: 0;
}

.bootstrap-datetimepicker-widget {
	list-style: none;

	&.dropdown-menu {
		display: block;
		margin: 2px 0;
		padding: 0.75rem 1rem;
		padding-bottom: 0.5rem;
		width: 17.75rem;

		&.timepicker-sbs {
			@media (min-width: map-get($grid-breakpoints, 'sm')) {
				width: 38em;
			}

			@media (min-width: map-get($grid-breakpoints, 'md')) {
				width: 38em;
			}

			@media (min-width: map-get($grid-breakpoints, 'lg')) {
				width: 38em;
			}
		}

		&:before, &:after {
			content: '';
			display: inline-block;
			position: absolute;
		}

		&.bottom {
			&:before {
				border-left: 7px solid transparent;
				border-right: 7px solid transparent;
				border-bottom: 7px solid $bs-datetimepicker-secondary-border-color;
				border-bottom-color: $bs-datetimepicker-secondary-border-color-rgba;
				top: -7px;
				left: 7px;
			}

			&:after {
				border-left: 6px solid transparent;
				border-right: 6px solid transparent;
				border-bottom: 6px solid $bs-datetimepicker-primary-border-color;
				top: -6px;
				left: 8px;
			}
		}

		&.top {
			&:before {
				border-left: 7px solid transparent;
				border-right: 7px solid transparent;
				border-top: 7px solid $bs-datetimepicker-secondary-border-color;
				border-top-color: $bs-datetimepicker-secondary-border-color-rgba;
				bottom: -7px;
				left: 6px;
			}

			&:after {
				border-left: 6px solid transparent;
				border-right: 6px solid transparent;
				border-top: 6px solid $bs-datetimepicker-primary-border-color;
				bottom: -6px;
				left: 7px;
			}
		}

		&.float-right {
			&:before {
				left: auto;
				right: 6px;
			}

			&:after {
				left: auto;
				right: 7px;
			}
		}
	}

	.list-unstyled {
		margin: 0;
	}

	*[data-action] > [class*='fa-angle-'] {
		font-size: 1.25rem;
	}

	a[data-action] {
		padding: 6px 0;
		color: $gray-700;
        --btn-border-width: 0;

		&:active {
			box-shadow: none !important;
		}
	}

	.timepicker-hour,
	.timepicker-minute,
	.timepicker-second {
		width: 54px;
		font-weight: 600;
		font-size: $bs-datetimepicker-timepicker-font-size;
		margin: 0;
	}

	button[data-action] {
		padding: 6px;
	}

	.btn[data-action="incrementHours"]::after {
		@extend .sr-only;
		content: "Increment Hours";
	}

	.btn[data-action="incrementMinutes"]::after {
		@extend .sr-only;
		content: "Increment Minutes";
	}

	.btn[data-action="decrementHours"]::after {
		@extend .sr-only;
		content: "Decrement Hours";
	}

	.btn[data-action="decrementMinutes"]::after {
		@extend .sr-only;
		content: "Decrement Minutes";
	}

	.btn[data-action="showHours"]::after {
		@extend .sr-only;
		content: "Show Hours";
	}

	.btn[data-action="showMinutes"]::after {
		@extend .sr-only;
		content: "Show Minutes";
	}

	.btn[data-action="togglePeriod"]::after {
		@extend .sr-only;
		content: "Toggle AM/PM";
	}

	.btn[data-action="clear"]::after {
		@extend .sr-only;
		content: "Clear the picker";
	}

	.btn[data-action="today"]::after {
		@extend .sr-only;
		content: "Set the date to today";
	}

	.picker-switch {
		text-align: center;

		&::after {
			@extend .sr-only;
			content: "Toggle Date and Time Screens";
		}

		td {
			padding: 0;
			margin: 0;
			height: auto;
			width: auto;
			line-height: inherit;

			span {
				line-height: 2.5;
				height: 2.5em;
				width: 100%;
			}
		}
	}

	table {
		width: 100%;
		margin: 0;

		& td,
		& th {
			text-align: center;
			border-radius: $bs-datetimepicker-border-radius;
			border-color: transparent !important;
			padding: 0.3rem;
		}

		& th {
			height: 20px;
			line-height: 20px;
			width: 30px;

			&.picker-switch {
				width: 145px;
			}

			&.disabled,
			&.disabled:hover {
				background: none;
				color: $bs-datetimepicker-disabled-color;
				cursor: not-allowed;
			}

			&.next, &.prev {
				min-width: 1.5rem;
			}

			&.prev::after {
				@extend .sr-only;
				content: "Previous Month";
			}

			&.next::after {
				@extend .sr-only;
				content: "Next Month";
			}

			&.dow {
				text-transform: uppercase;
				font-weight: 400;
				padding-top: 0.75rem;
				padding-bottom: 0.75rem;
				//color: $gray-500;
			}
		}

		& thead tr:first-child th {
			cursor: pointer;

			&:hover {
				background: $bs-datetimepicker-btn-hover-bg;
			}
		}

		& td {
			height: 54px;
			line-height: 54px;
			width: 54px;

			&.cw {
				font-size: .8em;
				height: 20px;
				line-height: 20px;
				color: $bs-datetimepicker-alternate-color;
			}

			&.day {
				height: 2.25rem;
				width: 2.25rem;
				padding: 0;
				min-width: 2.25rem;
				max-width: 2.25rem;
				min-height: 2.25rem;
				max-height: 2.25rem;
				line-height: calc(2.25rem - 1px);
				border: 1px solid transparent;
			}

			&.day:hover,
			&.hour:hover,
			&.minute:hover,
			&.second:hover {
				background: $bs-datetimepicker-btn-hover-bg;
				cursor: pointer;
			}

			&.old,
			&.new {
				color: $bs-datetimepicker-alternate-color;
			}

			&.today {
				position: relative;

				&:before {
					content: '';
					display: inline-block;
					border: solid transparent;
					border-width: 0 0 7px 7px;
					border-bottom-color: $bs-datetimepicker-active-bg;
					border-top-color: $bs-datetimepicker-secondary-border-color-rgba;
					position: absolute;
					bottom: 4px;
					right: 4px;
				}
			}

			&.active,
			&.active:hover {
				background-color: $bs-datetimepicker-active-bg;
				color: $bs-datetimepicker-active-color;
				text-shadow: $bs-datetimepicker-text-shadow;
			}

			&.active.today:before {
				border-bottom-color: #fff;
			}

			&.disabled,
			&.disabled:hover {
				background: none;
				color: $bs-datetimepicker-disabled-color;
				cursor: not-allowed;
			}

			span {
				display: inline-block;
				width: 54px;
				height: 54px;
				line-height: 54px;
				margin: 2px 1.5px;
				cursor: pointer;
				border-radius: $bs-datetimepicker-border-radius;

				&:hover {
					background: $bs-datetimepicker-btn-hover-bg;
				}

				&:active {
					background: darken($bs-datetimepicker-btn-hover-bg, 5%);
				}

				&.active {
					background-color: $bs-datetimepicker-active-bg;
					color: $bs-datetimepicker-active-color;
					text-shadow: $bs-datetimepicker-text-shadow;
				}

				&.old {
					color: $bs-datetimepicker-alternate-color;
				}

				&.disabled,
				&.disabled:hover {
					background: none;
					color: $bs-datetimepicker-disabled-color;
					cursor: not-allowed;
				}
			}
		}
	}

	&.usetwentyfour {
		td.hour {
			height: 27px;
			line-height: 27px;
		}
	}
}

.input-group [data-toggle="datetimepicker"] {
	cursor: pointer;
}
